<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/sweetalert.css"/>
	<link rel="stylesheet" href="css/page-styles.css" />
	<link rel="stylesheet" href="css/style.css" />
	<style type="text/css">
		.canvas {
			color: #fff;
		}
		
		.display {
			display: none;
		}
		.LOGO img{
			
			height: 152px;
		}
		.weather{
			height: 330px;
		}
		#chargeSite #DC-pile #charging {
			margin-top: 67px;
		}
		#pm25{
			font-size: 56px;		
		}
		#chargeSite #basicInfo .pm li span#pm_level{
		font-size: 56px;
		}
	</style>
</head>

<body>
	<div id="chargeSite">
		<div id="basicInfo">
			<ul>
				<li class="LOGO">
					<img src="img/dz_logo.png" />
				</li>
				<li class="time" style="padding-top: 255px">
					<!-- <img src="img/watch.png" />
					-->
					<canvas class="canvas" id="canvas" width="400px" height="400px"></canvas>
				</li>
				<li class="date" id="date"></li>
				<li class="weekday" id="week"></li>
				<li id="now"></li>
				<li class="weather" style="padding-bottom: 0">
					<img src="img/weathe_0002s_0002_partly-cloudy-day.png"/>
				</li>
				<li class="temperature" style="margin-top: 40px;">
					<span id="weather">多云</span>
					<span id="city_temperature">20</span>
					℃
				</li>
			</ul>
			<ul class="pm">
				<li>
					PM
					<span>2.5</span>
				</li>
				<li>
					<span id="pm25">60</span>
					<span id="pm_level">优</span>
				</li>
			</ul>

		</div>
		<div id="DC-pile">
			<ul class="type">
				<li>
					直流桩
					<span>1</span>
					个
				</li>
				<li id="direct_state">无空闲</li>
			</ul>
			<div class="chargeInfo">
				<div class="nameA" id="gun1">A枪口</div>
				<div class="num">
					<span>1</span>
					<span>#</span>
				</div>
				<div>
					<div class="dcState1" id="port1" style="padding-top: 0px;">
						<div >
							<div class="bigcircle">
								<div class="circle anim-flip show" id="circle1">
									<img class="bgcircle" src="img/circle1.png" />
									<img class="battery" src="img/batteryS.png" name="battery"/> 
									<strong></strong>
								</div>

								<div id="circleHiddenSmall" class="hiddencirclesmall"></div>
							</div>
							<div class="chargestate" id="charging">正在充电中...</div>
						</div>
					</div>

				</div>

			</div>

			<div class="chargeInfo">
				<div class="nameB" id="gun2">B枪口</div>
				<div class="dcState1" id="port2" style="padding-top: 0">
					<div>
						<div>
							<div class="bigcircle">
								<div class="circle anim-flip show" id="circle1">
									<img class="bgcircle" src="img/circle1.png" />
									<img class="battery" name="battery" src="img/batteryS.png" /> 
									<strong></strong>
								</div>

								<div id="circleHiddenSmall" class="hiddencirclesmall"></div>
							</div>
							<div class="chargestate" id="charging">正在充电中...</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="AC-pile">
			<ul class="type">
				<li>
					交流桩
					<span>4</span>
					个
				</li>
				<li class="currentstate" id="alternating_state" style="background: #ff6559;">
					<span>无</span>空闲
				</li>
			</ul>

			<div class="chargeInfo">
				<div class="num">
					<span>2</span>
					<span>#</span>
				</div>
				<div id="exchange0">
					<div class="display">
						<div class="charging">
							<div id="">
								<img src="img/charging.png" />
							</div>
							<img class="battery" name="battery" src="img/batteryM1.png" />
						</div>
						<div class="chargestate">正在充电...</div>
					</div>
				</div>
			</div>
			<div class="chargeInfo">
				<div class="num">
					<span>3</span>
					<span>#</span>
				</div>
				<div id="exchange1">
					<div class="display">
						<div class="charging">
							<div id="">
								<img src="img/charging.png" />
							</div>
							<img class="battery" name="battery" src="img/batteryM1.png" />
						</div>
						<div class="chargestate">正在充电...</div>
					</div>
				</div>
			</div>
			<div class="chargeInfo" style="border-bottom: 0;">
				<div class="num">
					<span>4</span>
					<span>#</span>
				</div>
				<div id="exchange2">
					<div class="display">
						<div class="charging">
							<div id="">
								<img src="img/charging.png" />
							</div>
							<img class="battery" name="battery" src="img/batteryM1.png" />
						</div>
						<div class="chargestate">正在充电...</div>
					</div>
				</div>

			</div>
			<div class="chargeInfo" style="border-bottom: 0;">
				<div class="num">
					<span>5</span>
					<span>#</span>
				</div>
				<div id="exchange3">
					<div class="display">
					<div class="charging">
							<div id="">
								<img src="img/charging.png"/>
							</div>
							<img class="battery" name="battery" src="img/batteryM1.png" />
						</div>
						<div class="chargestate">正在充电...</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</body>

	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/circle-progress.js"></script>
	<script type="text/javascript" src="js/date.js"></script>
	<script type="text/javascript" src="js/chargingStation.js"></script>
	<script type="text/javascript" src="js/sweetalert.min.js"></script>
	<script type="text/javascript" src="js/roundClock.js"></script>
	<script type="text/javascript">

		function change(i){
		var imgs = document.getElementsByName("battery");
		if(i>4) i=1; 
		for ( var p in imgs ){
			if (p!="length"&&p!="item"){
				imgs[p].setAttribute("src", "img/batteryS"+i+".png");
			}
			
		}
		i++;
		 // 一共5张图片，所以循环替换
			setTimeout("change("+i+")",1000);
		}
		setTimeout("change(1)", 1000);

		 
	</script>
</html>